/*
 * @Author: liszter <liszter@qq.com>
 * @Date: 2024-02-19 16:18:32
 * @LastEditTime: 2024-02-26 14:14:28
 * @LastEditors: lishutao
 * @Description: 创建一个下雪天。。。。。。。。
 * @FilePath: \three学习代码\demo-08\src\main\main.js
 */
import * as THREE from "three";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";


// 导入动画库

// 创建场景
const scene = new THREE.Scene();

// 创建相机
// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  40
);
camera.position.set(0, 0, 40 );
scene.add(camera);



// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);


document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement)




// 用于存储粒子系统的几何信息

// const particlesGeometry = new THREE.BufferGeometry()
// const count = 5000
// // 设置缓冲区数组
// const positions = new Float32Array(count * 3)
// // 设置例子顶点颜色
// const colors = new Float32Array(count * 3)
// for( let i = 0; i < count * 3; i++ ) {
//     positions[i] = (Math.random() - 0.5) * 100
//     colors[i] = Math.random()
// }
// particlesGeometry.setAttribute(
//   "position",
//   new THREE.BufferAttribute(positions, 3)
// )

// particlesGeometry.setAttribute(
//   "color",
//   new THREE.BufferAttribute(colors, 3))

//   // 设置点材质
//   const pointsMaterial = new THREE.PointsMaterial()
//   pointsMaterial.size = 0.5
//   // pointsMaterial.color.set(0xfff000)
//   // 相机深度衰减
//   pointsMaterial.sizeAttenuation = true


// // 载入纹理
// // 载入纹理
// const textureLoader = new THREE.TextureLoader();
// const texture = textureLoader.load("./textures/particles/xh.png");

// // 设置点材质纹理
// pointsMaterial.map = texture;
// pointsMaterial.alphaMap = texture;
// pointsMaterial.transparent = true;
// pointsMaterial.depthWrite = false;
// pointsMaterial.blending = THREE.AdditiveBlending;


// // 设置启动顶点颜色
// pointsMaterial.vertexColors = true;
// const points = new THREE.Points(particlesGeometry, pointsMaterial);







function createPoint(count = 1000) {
  
const particlesGeometry = new THREE.BufferGeometry()
// 设置缓冲区数组
const positions = new Float32Array(count * 3)
// 设置例子顶点颜色
const colors = new Float32Array(count * 3)
for( let i = 0; i < count * 3; i++ ) {
    positions[i] = (Math.random() - 0.5) * 100
    colors[i] = Math.random()
}
particlesGeometry.setAttribute(
  "position",
  new THREE.BufferAttribute(positions, 3)
)

particlesGeometry.setAttribute(
  "color",
  new THREE.BufferAttribute(colors, 3))

  // 设置点材质
  const pointsMaterial = new THREE.PointsMaterial()
  pointsMaterial.size = 0.5
  // pointsMaterial.color.set(0xfff000)
  // 相机深度衰减
  pointsMaterial.sizeAttenuation = true


// 载入纹理
// 载入纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./textures/particles/xh.png");

// 设置点材质纹理
pointsMaterial.map = texture;
pointsMaterial.alphaMap = texture;
pointsMaterial.transparent = true;
pointsMaterial.depthWrite = false;
pointsMaterial.blending = THREE.AdditiveBlending;


// 设置启动顶点颜色
pointsMaterial.vertexColors = true;
const points = new THREE.Points(particlesGeometry, pointsMaterial);

return points
}









const points = createPoint(5000)

const points2 = createPoint(1000)

scene.add(points)

scene.add(points2)









renderer.render(scene, camera);


// 设置时钟
const clock = new THREE.Clock();



// 渲染循环
function animate() {
  requestAnimationFrame(animate);




  controls.update()


  let time = clock.getElapsedTime();

  // console.log(time)

  points2.rotation.x = time * 0.4
  points2.rotation.y = time *(Math.random()/2)
  points.rotation.x = time * 0.3
  // points.position.z = Math.cos(time) * 3;
  // points.position.y = 2 + Math.sin(time * 10) / 2;

   //   根据当前滚动的scrolly，去设置相机移动的位置
   renderer.render(scene, camera);

}
animate();


// gsap.to(points.position, {
//   y: 20,
//   yoyo: true,
// })